<template>
  <div class="channel-eait">
    <van-cell 
      center 
      :border="false"
    >
      <div 
        slot="title"
        class="channel-title"
      >
        我的频道
      </div>
      <van-button
        type="danger"
        :plain="true"
        round
        size="mini "
        @click="isEdit = !isEdit"
      >
        {{ isEdit ? '完成':'编辑' }}
      </van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item 
        v-for="(channel,index) in userChannels"
        :key="index"
        class="grid-item" 
        :class="{checked:index === active}"
        :icon="(isEdit && index !== 0) ? 'clear':''"
        :text="channel.name"
        @click="onUserChannelClcik(channel,index)"
      />
    </van-grid>
	
    <van-cell 
      center 
      :border="false"
    >
      <div 
        slot="title" 
        class="channel-title"
      >
        频道推荐
      </div>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item 
        v-for="(channel,index) in recommendChannels"
        :key="index"
        class="grid-item" 
        :text="channel.name" 
        @click="onAdd(channel)"
      />
    </van-grid>
  </div>
</template>

<script>
	import { getAllChannels , addUserChannel , deleteUserChannel} from '@/api/channel';
	import { mapState } from 'vuex';
	import { setItem } from '@/utils/storage';
	export default{
		name:'ChannelEdit',
		computed:{
			...mapState(['user']),
			//推荐的频道列表
			//计算属性会观测内部依赖数据的变化而重新求值
			recommendChannels(){
				//思路：所有频道 - 我的频道 = 剩下的频道
				return this.allChannels.filter(channel =>{
					//判断channel是否属于用户频道
				  return !this.userChannels.find(userChannels =>{
					  //找到满足该条件的元素
						return userChannels.id === channel.id
					})
				})
			}
		},
		components:{},
		props:{
			userChannels:{
				type:Array,
				required:true
			},
			active:{
				type:Number,
				required:true
			}
		},
		data() {
			return{
				allChannels:[],//所有频道数据列表
				isEdit:false,//控制编辑的显示状态
				checked:false
			}
		},
		watch:{},
		created() {
			this.loadAllChannels()
			
		},
		mounted() {
		},
		methods:{
			async loadAllChannels(){
				const { data } = await getAllChannels()
				console.log("-----------")
				console.log(data)
				this.allChannels = data.data.channels
			},
			async onAdd(channel){
				this.userChannels.push(channel)
				
				//TODO:数据持久化
				if(this.user){
					//登录了，数据存储到数据库
				    await addUserChannel({
						channels:[
							{id:channel.id, seq:this.userChannels.length}
						]
					})
				}else{
					//没有登录，数据存储到本地
					setItem('user-channels',this.userChannels)
				}
			},
		    /* 编辑按钮 */
			onUserChannelClcik(channel,index){
				// 推荐频道为为固定,不能删除
				if(this.isEdit && index!==0){
					//编辑状态，删除频道
					this.deleteChannel(channel,index)
				}else{
					//非编辑状态，切换频道
					this.switchChannel(index)
				}
			},
			async deleteChannel(channel,index){
				console.log('删除频道')
				//如果删除的是当前激活频道之前的频道
				if(index <= this.active){
					//更新激活频道的索引
					this.$emit('updata-active',this.active - 1)
				}
				this.userChannels.splice(index,1)
				
			     // 数据持久化
				 if(this.user){
					 //登录了，持久化到线上
					 await deleteUserChannel(channel.id)
				 }else{
					 //没有登录，持久化到本地
					 setItem('user-channels',this.userChannels)
				 }
			},
			switchChannel(index){
				console.log('切换频道')
				//切换频道
				this.$emit('updata-active',index)
				//关闭弹出层
				this.$emit('close')
			},
			/* 编辑按钮结束 */
		}
	}
</script>

<style scoped lang="less">
	.channel-eait{
		padding-top:54px;
		.channel-title{
			font-size: 16px;
			color: #333333;
		}
		.grid-item{
			width: 80px;
			height: 43px;
			/deep/.van-grid-item__content{
				background-color: #f4f5f6;
				.van-grid-item__text{
					font-size: 14px;
					color: #222;
					margin-top: 0;
					position: relative;
				}
			}
			/deep/.van-grid-item__icon{
				position: absolute;
				right: -5px;
				top: -5px;
				font-size: 20px;
				color: #ccc;
				z-index: 100;
			}
		}
	}
	.checked{
		/deep/.van-grid-item__text{
			color: red!important;
		}
	}
	//编辑按钮
	.van-button__content{
		width: 48px;
	}
</style>
